<template>
  <div>
    <q-card>
      <a :href="props.item.courseUrl" target="_blank">
        <q-img :src="imgUrlBase + props.item.courseImgUrl">
          <div class="text-subtitle2 ellipsis absolute-bottom">
            {{ props.item.courseName }}
          </div>
        </q-img>
      </a>
      <q-btn
        class="bg-white text-red"
        style="
          width: 20px;
          height: 20px;
          top: 0;
          right: 0;
          position: absolute;
          background: white;
        "
        :icon="
          favs.indexOf('a' + props.item.courseId.toString()) != -1
            ? 'favorite'
            : 'favorite_border'
        "
        @click.capture="addFavorite(v)"
      />

      <a :href="props.item.courseUrl" target="_blank">
        <q-card-section class="q-py-xs q-px-md">
          <p class="ellipsis-2-lines text-body2 text-weight-thin q-ma-none">
            {{ props.item.courseDescription }}
          </p>
          <q-tooltip>{{ props.item.courseDescription }}</q-tooltip>
        </q-card-section>
        <!--之后后端添加后可替换 :icon="v.favorite ? 'favorite' : 'favorite_border'" -->
      </a>
    </q-card>
  </div>
</template>
<script setup>
const props = defineProps({
  // eslint-disable-next-line vue/require-default-prop
  item: { type: Object },

  // eslint-disable-next-line vue/require-default-prop
  addFavorite: { type: Function },
});
</script>
